<template>
  <svg :class="[svgClassName, 'svg-class']" aria-hidden="true">
    <use :href="svgIcon"></use>
  </svg>
</template>

<script>
import { reactive, computed, ref, resetTracking, toRefs } from '@vue/reactivity'
export default {
  name: "SvgIcon",
  components: {},
  props: {
    iconName: {
      type: String,
      default: ""
    },
    className: {
      type: String,
      default: ""
    }
  },
  setup(props) {
    // 将值赋值给变量并且使用变量完成绑定
    const svgClassName = ref(props.className);  // props中的className是与svg的class直接进行绑定,但不推荐
    // 原因是父组件每次发生变更的时候,子组件的所有props的值都会被更新,如果直接使用props对象绑定数据,只要父组件发生了变化
    // 子组件就要重新渲染

    // const svgIcon = computed({
    //   set: () => {

    //   },
    //   get: () => `#icon-${props.iconName}`
    // })
    const svgIcon = computed(() => `#icon-${props.iconName}`);
    return {
      svgClassName,
      svgIcon
    };
  },
};
</script>
<style lang="scss" scoped>
.svg-class {
  width: 1em;
  height: 1em;
  fill: fill;
}
</style>
